<template>
  <div class="app-container">
    <el-card>
      <div class="filter-container">
        <el-input
          v-model="listQuery.buildingNo"
          placeholder="楼号"
          style="width: 200px"
          class="filter-item"
          @keyup.enter.native="handleFilter"
        />
        <el-input
          v-model="listQuery.unitNo"
          placeholder="单元号"
          style="width: 200px"
          class="filter-item"
          @keyup.enter.native="handleFilter"
        />
        <el-input
          v-model="listQuery.roomNo"
          placeholder="房间号"
          style="width: 200px"
          class="filter-item"
          @keyup.enter.native="handleFilter"
        />
        <el-select
          v-model="listQuery.status"
          placeholder="房屋状态"
          clearable
          style="width: 200px"
          class="filter-item"
          @change="handleFilter"
        >
          <el-option label="空置" value="空置" />
          <el-option label="已售" value="已售" />
          <el-option label="出租" value="出租" />
        </el-select>
        <el-select
          v-model="listQuery.complexId"
          placeholder="选择小区"
          clearable
          style="width: 200px"
          class="filter-item"
          @change="handleFilter"
        >
          <el-option
            v-for="item in complex"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
        <el-button
          v-waves
          class="filter-item"
          type="primary"
          icon="el-icon-search"
          @click="handleFilter"
        >
          搜索
        </el-button>
        <el-button
          class="filter-item"
          style="margin-left: 10px"
          type="primary"
          icon="el-icon-plus"
          @click="handleCreate"
        >
          新增
        </el-button>
      </div>

      <el-table
        v-loading="listLoading"
        :data="list"
        border
        fit
        highlight-current-row
        style="width: 100%"
      >
        <el-table-column label="ID" prop="id" align="center" width="80" />
        <el-table-column label="小区" prop="complex.name" align="center" />
        <el-table-column label="楼号" prop="buildingNo" align="center" />
        <el-table-column label="单元号" prop="unitNo" align="center" />
        <el-table-column label="房间号" prop="roomNo" align="center" />
        <el-table-column label="房屋状态" prop="status" align="center">
          <template slot-scope="{ row }">
            <el-tag
              :type="
                row.status === '空置'
                  ? 'info'
                  : row.status === '已售'
                  ? 'success'
                  : 'warning'
              "
            >
              {{ row.status }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="房屋面积" prop="area" align="center">
          <template slot-scope="{ row }"> {{ row.area }}㎡ </template>
        </el-table-column>
        <el-table-column label="业主" prop="owner.name" align="center" />
        <el-table-column
          label="操作"
          align="center"
          width="230"
          class-name="small-padding fixed-width"
        >
          <template slot-scope="{ row }">
            <el-button type="primary" size="mini" @click="handleUpdate(row)">
              编辑
            </el-button>
            <el-button size="mini" type="danger" @click="handleDelete(row)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="listQuery.page"
        :limit.sync="listQuery.limit"
        @pagination="getList"
      />
    </el-card>
  </div>
</template>

<script>
import { getHouseList, deleteHouse } from "@/api/house";
import { getComplexList } from "@/api/community";
import waves from "@/directive/waves";
import Pagination from "@/components/Pagination";

export default {
  name: "HouseList",
  components: { Pagination },
  directives: { waves },
  data() {
    return {
      list: null,
      total: 0,
      listLoading: true,
      listQuery: {
        page: 1,
        limit: 20,
        buildingNo: undefined,
        unitNo: undefined,
        roomNo: undefined,
        status: undefined,
        complexId: undefined,
      },
      complex: [],
    };
  },
  created() {
    this.getList();
    this.getcomplex();
  },
  methods: {
    async getList() {
      this.listLoading = true;
      try {
        const { data } = await getHouseList(this.listQuery);
        this.list = data.items;
        this.total = data.total;
      } catch (error) {
        console.error("获取房屋列表失败:", error);
      }
      this.listLoading = false;
    },
    async getcomplex() {
      try {
        const { data } = await getComplexList();
        this.complex = data.items;
      } catch (error) {
        console.error("获取小区列表失败:", error);
      }
    },
    handleFilter() {
      this.listQuery.page = 1;
      this.getList();
    },
    handleCreate() {
      this.$router.push("/house/create");
    },
    handleUpdate(row) {
      this.$router.push(`/house/edit/${row.id}`);
    },
    async handleDelete(row) {
      try {
        await this.$confirm("确认删除该房屋信息吗？", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        });
        await deleteHouse(row.id);
        this.$notify({
          title: "成功",
          message: "删除成功",
          type: "success",
          duration: 2000,
        });
        this.getList();
      } catch (error) {
        if (error !== "cancel") {
          console.error("删除失败:", error);
        }
      }
    },
  },
};
</script>

<style scoped>
.filter-container {
  padding-bottom: 10px;
}
.filter-item {
  display: inline-block;
  vertical-align: middle;
  margin-bottom: 10px;
  margin-right: 10px;
}
</style>
